{% extends 'base.html' %}

{% load humanize %}

{% block content %}
<section id="showcase-inner" class="showcase-search text-white py-5">   <!-- 且如同之前实训中做法一致，让其拓展自 base.html和加载 humanize。 -->
    <div class="container">
      <div class="row text-center">
        <div class="col-md-12">
          <form action="{% url 'search' %}">   <!-- 对检索页中的表单提交路径进行修正。这样无论是在主页检索还在在检索页检索，提交的路径都不会跳转错误。 -->
            <!-- Form Row 1 -->
            <div class="form-row">
              <div class="col-md-4 mb-3">
                <label class="sr-only">Keywords</label>
                <input type="text" name="keywords" class="form-control" placeholder="Keyword (Pool, Garage, etc)" value="{{ values.keywords }}">  <!-- 跳转到检索页后，关键词输入框中依然保有 ‘pool’。    -->
              </div>

              <div class="col-md-4 mb-3">
                <label class="sr-only">City</label>
                <input type="text" name="city" class="form-control" placeholder="City" value="{{ values.city }}"> <!-- 同样的思路对城市名输入框也进行修改。 -->
              </div>

              <div class="col-md-4 mb-3">
                <label class="sr-only">State</label>
                <select name="state" class="form-control">
                  <option selected="true" disabled="disabled">State (All)</option>
                    {% for key, value in state_choices.items %}    <!-- 修改相应的静态网页的内容。 -->
                      <option value="{{ key }}">
                        {% if key == values.state %}  <!-- 对于 State 、Bedroom 和 Price 就会稍微麻烦些，因为它们在网页中是下拉选项的结构。被用户选中的选项的标签应为：<option selected></option>而没选中的标签是：<option></option> -->
                          selected
                        {% endif %}
                        {{ value }}</option>
                    {% endfor %}
                </select>
              </div>
            </div>
            <!-- Form Row 2 -->
            <div class="form-row">
              <div class="col-md-6 mb-3">
                <label class="sr-only">Bedrooms</label>
                <select name="bedrooms" class="form-control">
                  <option selected="true" disabled="disabled">Bedrooms (Any)</option>
                    {% for key, value in bedroom_choices.items %}    
                    <option value="{{ key }}">
                      {% if key == values.bedrooms %}  <!-- 对于卧室数量也是用同样的思路进行实现。 -->
                          selected
                        {% endif %}
                        {{ value }}</option>
                      {{ value }}</option>
                    {% endfor %} 
                </select>
              </div>
              <div class="col-md-6 mb-3">
                <select name="price" class="form-control">
                  <option selected="true" disabled="disabled">Max Price (All)</option>
                    {% for key, value in price_choices.items %}    
                    <option value="{{ key }}">
                      {% if key == values.price %}  <!-- 对于价格也是用同样的思路进行实现。 -->
                          selected
                        {% endif %}
                      {{ value }}</option>
                    {% endfor %} 
                </select>
              </div>
            </div>
            <button class="btn btn-secondary btn-block mt-4" type="submit">Submit form</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Breadcrumb -->
  <section id="bc" class="mt-3">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{% url 'index' %}">  <!-- 修改检索页中的静态链接为动态路径。 -->
              <i class="fas fa-home"></i> Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="{% url 'listings' %}">Browse Listings</a>
          </li>
          <li class="breadcrumb-item active"> Search Results</li>
        </ol>
      </nav>
    </div>
  </section>

  <!-- Listings -->
  <section id="listings" class="py-4">
    <div class="container">
      <div class="row">
          
        {% if listings %}
          {% for listing in listings %}
          <div class="col-md-6 col-lg-4 mb-4">
            <div class="card listing-preview">
              <img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
              <div class="card-img-overlay">
                <h2>
                  <span class="badge badge-secondary text-white">${{listing.price}}</span>
                </h2>
              </div>
              <div class="card-body">
                <div class="listing-heading text-center">
                  <h4 class="text-primary">{{ listing.title }}</h4>
                  <p>
                    <i class="fas fa-map-marker text-secondary"></i> {{ listing.city }}, {{ listing.state }}, {{ listing.zipcode }}</p>
                </div>
                <hr>
                <div class="row py-2 text-secondary">
                  <div class="col-6">
                    <i class="fas fa-th-large"></i> Sqft: {{ listing.sqft }}</div>
                  <div class="col-6">
                    <i class="fas fa-car"></i> Garage: {{ listing.garage }}</div>
                </div>
                <div class="row py-2 text-secondary">
                  <div class="col-6">
                    <i class="fas fa-bed"></i> bedromms: {{ listing.bedrooms }}</div>
                  <div class="col-6">
                    <i class="fas fa-bath"></i> bathrooms: {{ listing.bathrooms }}</div>
                </div>
                <hr>
                <div class="row py-2 text-secondary">
                  <div class="col-12">
                    <i class="fas fa-user"></i> {{ listing.realtor }}</div>
                </div>
                <div class="row text-secondary pb-2">
                  <div class="col-6">
                    <i class="fas fa-clock"></i> {{ listing.list_date | timesince }}</div>
                </div>
                <hr>
                <a href="{% url 'listing' listing.id %}" class="btn btn-primary btn-block">More Info</a>
              </div>
            </div>
          </div>
          {% endfor %} 
        {% else %}
          <div class="col-md-12">
            <p>No Listings Available</p>
          </div>
        {% endif %}
        
      </div>
    </div>
  </section>
  {% endblock %}